<template>
    <div class="good-li">
        <image
            class="good-pic"
            src="https://via.placeholder.com/300x300"
            alt="商品图片"
        />
        <div class="good-detail">
            <span class="good-price">¥ {{ item?.price }}</span>
        </div>
    </div>
</template>
<script setup lang="ts"></script>

<style scoped lang="scss">
.good-li {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    background: #f3f7f8;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 2rpx solid #e4edef;
    .good-pic {
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
    }
    .good-detail {
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 100rpx;
        height: 36rpx;
        background: rgba(34, 34, 34, 0.4);
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        line-height: 36rpx;
        text-align: center;
        .good-price {
            font-weight: 400;
            font-size: 20rpx;
            color: #ffffff;
        }
    }
}
</style>
